<template>
    <div id="rights">
        <!--        面包屑导航-->
        <bread-nav>
            <span slot="nav1">权限管理</span>
            <span slot="nav2">权限列表</span>
        </bread-nav>
<!--        卡片视图-->
        <el-card>
            <!--        权限列表数据-->
            <el-table
                    border
                    :data="powerList"
                    stripe
                    style="width: 100%">
                <el-table-column  type="index" label="#"></el-table-column>
                <el-table-column  label="权限名称" prop="authName"></el-table-column>
                <el-table-column  label="路径" prop="path"></el-table-column>
                <el-table-column  label="权限等级" prop="level">
                    <template v-slot="scope">
                        <el-tag v-if="scope.row.level === '0'">一级</el-tag>
                        <el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
                        <el-tag type="warning" v-else>三级</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
    import BreadNav from "../../components/content/BreadNav";
    import {getPowerData} from "../../network/power";

    export default {
        name: "rights",
        components:{
            BreadNav
        },
        data(){
            return{
                powerList:[]
            }
        },
        methods:{
            getPowerDataM(){
                getPowerData().then(res => {
                    // console.log(res);
                    if (res.data.meta.status === 200){
                        this.powerList = res.data.data
                    }
                })
            }
        },
        mounted() {
            this.getPowerDataM();
        }
    }
</script>

<style scoped lang="less">
    .el-card{
        margin-top: 1rem;
    }
</style>